<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>键盘事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
    <style>
      * {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <!--
    //每个按键都有自己的名字，和自己的keyCode编码。可以在页面输入按键，打出keyCode，例如回车是13

    1：Vue提供了常用的按键别名，可以跟在键盘事件之后触发。
        回车: enter
        删除: delete(捕获删除或退格backspace键)
        退出: esc
        空格: space
        换行: tab   特殊，必须配合keydown才会生效，默认会移开焦点
        上下左右: up down left right

    2：Vue未提供别名的按键，可使用按键的原始key绑定。但需注意驼峰形式多个单词的，首字母要小写，多个单词用-连接

    3：系统修饰符，用法比较特殊。 ctrl、alt、shift、meta(win键)
       这四个按键直接配置keyup或keydown键，默认不会生效，需按照指定使用规范。
       1：配合keyup使用，需在按下修饰键的同时，再按下其他键，随后释放其他键，才能触发。
       2：配合keydown使用，正常触发事件。

    4：使用keyCode指定具体的按键，触发事件，这种方式已经不被推荐，因为不同键盘可能有差异

    5：通过 Vue.config.keyCodes.自定义键名 = 键码，可以去定义按键别名

    -->

    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!--keyup:抬起时触发  keydown:按下时触发，一般用keyup-->
      <input
        type="text"
        placeholder="按下回车提示输入"
        @keyup.enter="showInfo"
      />
      <br />
      <!--使用原始键绑定事件-->
      <input
        type="text"
        placeholder="按下切换大小写提示输入"
        @keyup.caps-lock="showInfo"
      />
      <!--修饰符也可以连着写-->
      <input
        type="text"
        placeholder="按下ctrl+y提示输入"
        @keyup.ctrl.y="showInfo"
      />
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        name: "图灵",
      },
      methods: {
        showInfo(e) {
          //历史做法，判断如果不满足条件，不执行
          //if (e.keyCode !== 13) return;
          console.log(e.key + "  " + e.keyCode);
        },
      },
    });
  </script>
</html>
